<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 / 1024 > 1) {
    ElMessage.error('最大不超过 1GB!')
    return false
  }
  return true
}
function UploadSuccess(e: Event) {
  ElMessage(e.msg)
}
</script>

<template>
  <div>
    <PageHeader title=" 模型文件上传，支持断点续传。" />
    <PageMain title="模型文件上传(每次一个)">
      <el-upload
        drag
        :limit="1"
        :before-upload="beforeAvatarUpload"
        :on-success="UploadSuccess"
        action="http://localhost:8080/upload"
      >
        <el-icon class="el-icon--upload">
          <Icon icon="icon-park:upload-three" />
        </el-icon>
        <div class="el-upload__text">
          拖拽文件到此或<em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip" style="text-align: center;">
            模型文件最大不超过 <b>1 GB</b>
          </div>
        </template>
      </el-upload>
    </PageMain>
  </div>
</template>
